<template>
  <input class="input" :class="{'inputOnFocus':OnFocus, 'inputBulr' :!OnFocus }" @focus="OnFocus = true" @blur="OnFocus = false"/>
</template>

<script>
export default {
data(){
    return{
        OnFocus:false,
    }
}
}
</script>

<style scoped>
input{
    width: 10px;
    transition: all 1s;
}
.inputOnFocus{
    width: 100px;
}
.inputBulr{
    width: 10px;
}
</style>